<!-- components/TimePicker/TimePicker.vue -->
<template>
  <div class="time-picker">
    <div class="time-picker-trigger" @click="handleTriggerClick">
      <slot name="trigger">
        <input
          type="text"
          :value="value"
          readonly
          placeholder="请选择时间"
        />
      </slot>
    </div>
    
    <!-- 时间选择面板 -->
    <div v-if="visible" class="time-picker-panel">
      <!-- 时间选择内容 -->
      <div class="time-picker-content">
        <!-- 小时选择 -->
        <div class="time-column">
          <div
            v-for="hour in 24"
            :key="hour"
            :class="['time-item', { 'disabled': isHourDisabled(hour - 1) }]"
            @click="selectHour(hour - 1)"
          >
            {{ String(hour - 1).padStart(2, '0') }}
          </div>
        </div>
        
        <!-- 分钟选择 -->
        <div class="time-column">
          <div
            v-for="minute in 60"
            :key="minute"
            :class="['time-item', { 'disabled': isMinuteDisabled(minute - 1) }]"
            @click="selectMinute(minute - 1)"
          >
            {{ String(minute - 1).padStart(2, '0') }}
          </div>
        </div>
        
        <!-- 秒数选择（可选） -->
        <div v-if="showSeconds" class="time-column">
          <div
            v-for="second in 60"
            :key="second"
            :class="['time-item', { 'disabled': isSecondDisabled(second - 1) }]"
            @click="selectSecond(second - 1)"
          >
            {{ String(second - 1).padStart(2, '0') }}
          </div>
        </div>
      </div>
      
      <!-- 底部操作栏 -->
      <div class="time-picker-footer">
        <slot name="footer">
          <button class="btn-confirm" @click="handleConfirm">确定</button>
          <button class="btn-cancel" @click="handleCancel">取消</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  },
  format: {
    type: String,
    default: 'HH:mm'
  },
  showSeconds: {
    type: Boolean,
    default: false
  },
  disabledHours: {
    type: Function,
    default: () => []
  },
  disabledMinutes: {
    type: Function,
    default: () => []
  },
  disabledSeconds: {
    type: Function,
    default: () => []
  },
  placement: {
    type: String,
    default: 'bottom'
  },
  size: {
    type: String,
    default: 'default'
  }
})

const emit = defineEmits(['update:value', 'update:visible', 'change', 'open', 'close'])

// 当前选中的时间
const selectedHour = ref(0)
const selectedMinute = ref(0)
const selectedSecond = ref(0)

// 处理时间选择
const selectHour = (hour) => {
  if (!isHourDisabled(hour)) {
    selectedHour.value = hour
    updateValue()
  }
}

const selectMinute = (minute) => {
  if (!isMinuteDisabled(minute)) {
    selectedMinute.value = minute
    updateValue()
  }
}

const selectSecond = (second) => {
  if (!isSecondDisabled(second)) {
    selectedSecond.value = second
    updateValue()
  }
}

// 更新时间值
const updateValue = () => {
  const hour = String(selectedHour.value).padStart(2, '0')
  const minute = String(selectedMinute.value).padStart(2, '0')
  const second = String(selectedSecond.value).padStart(2, '0')
  
  let timeString = `${hour}:${minute}`
  if (props.showSeconds) {
    timeString += `:${second}`
  }
  
  emit('update:value', timeString)
  emit('change', timeString)
}

// 禁用时间判断
const isHourDisabled = (hour) => {
  const disabledHours = props.disabledHours()
  return disabledHours.includes(hour)
}

const isMinuteDisabled = (minute) => {
  const disabledMinutes = props.disabledMinutes(selectedHour.value)
  return disabledMinutes.includes(minute)
}

const isSecondDisabled = (second) => {
  const disabledSeconds = props.disabledSeconds(selectedHour.value, selectedMinute.value)
  return disabledSeconds.includes(second)
}

// 处理面板显示
const handleTriggerClick = () => {
  emit('update:visible', true)
  emit('open')
}

const handleConfirm = () => {
  emit('update:visible', false)
  emit('close')
}

const handleCancel = () => {
  emit('update:visible', false)
  emit('close')
}

// 监听 value 变化，更新选中时间
watch(() => props.value, (newValue) => {
  if (newValue) {
    const [hours, minutes, seconds] = newValue.split(':').map(Number)
    selectedHour.value = hours
    selectedMinute.value = minutes
    if (props.showSeconds && seconds !== undefined) {
      selectedSecond.value = seconds
    }
  }
}, { immediate: true })
</script>

<style scoped>
.time-picker {
  position: relative;
  display: inline-block;
}

.time-picker-trigger {
  cursor: pointer;
}

.time-picker-trigger input {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.time-picker-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.time-picker-content {
  display: flex;
  padding: 8px;
}

.time-column {
  width: 60px;
  height: 200px;
  overflow-y: auto;
  border-right: 1px solid #eee;
}

.time-column:last-child {
  border-right: none;
}

.time-item {
  padding: 4px 8px;
  text-align: center;
  cursor: pointer;
}

.time-item:hover {
  background-color: #f5f5f5;
}

.time-item.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.time-picker-footer {
  padding: 8px;
  text-align: right;
  border-top: 1px solid #eee;
}

.btn-confirm,
.btn-cancel {
  margin-left: 8px;
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-confirm {
  background-color: #1890ff;
  color: white;
}

.btn-cancel {
  background-color: #f5f5f5;
  color: #666;
}

/* 大小变体 */
.time-picker.large input {
  padding: 6px 12px;
  font-size: 16px;
}

.time-picker.small input {
  padding: 2px 6px;
  font-size: 12px;
}

/* 位置变体 */
.time-picker-panel.top {
  top: auto;
  bottom: 100%;
}
</style>